<template>
  <div id="order_list">
    <div class="class_list">
      <el-radio-group v-model="radio" size="medium" @input="changeRadio">
        <el-radio-button label="全部订单"></el-radio-button>
        <el-radio-button label="已发布"></el-radio-button>
        <el-radio-button label="预约成功"></el-radio-button>
        <el-radio-button label="进行中"></el-radio-button>
        <el-radio-button label="已完成"></el-radio-button>
        <el-radio-button label="待评价"></el-radio-button>
        <el-radio-button label="已评价"></el-radio-button>
      </el-radio-group>
      <!-- 分页 -->
      <el-pagination @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="pageSize"
        layout="total, prev, pager, next" :total="total">
      </el-pagination>
    </div>
    <!-- 订单列表 -->
    <div class="box" v-if="orederData">
      <MyOrderVue v-for="item in orederData" :key="item.order_id" :orederData="item"></MyOrderVue>
    </div>
    <el-empty description="暂无订单，快去下单吧！" v-else></el-empty>
  </div>
</template>

<script>
import MyOrderVue from '@/components/userComponents/MyOrder.vue'
import { getorderListService, getorderListByStatusService } from '@/api/order.js'
export default {
  data () {
    return {
      radio: '全部订单',
      total: 0,
      pageSize: 3,
      currentPage: 1,
      orederData: []
    }
  },
  async created () {
    await this.$store.dispatch('userStore/getBaseInfoService')
    await this.getOrderList()
  },
  methods: {
    async getOrderList () {
      const currentPage = (this.currentPage - 1) * this.pageSize
      const res = await getorderListService(currentPage, this.pageSize)
      // console.log(res)
      res.data.forEach(element => {
        element.order_status = this.getStatus(element.order_status)
      })
      this.orederData = res.data
      this.total = res.total
      // console.log(res)
    },
    async changeRadio () {
      const radio = this.setStatus(this.radio)
      if (this.radio === '全部订单') return await this.getOrderList()
      const currentPage = (this.currentPage - 1) * this.pageSize
      const res = await getorderListByStatusService(currentPage, this.pageSize, radio)
      if (res.data) {
        res.data.forEach(element => {
          element.order_status = this.getStatus(element.order_status)
        })
      }
      this.orederData = res.data
      this.total = res.total
    },
    async handleCurrentChange () {
      await this.getOrderList()
    },
    setStatus (radio) {
      switch (radio) {
        case '全部订单':
          return '全部订单'
        case '已发布':
          return 1
        case '预约成功':
          return 2
        case '进行中':
          return 3
        case '已完成':
          return 4
        case '待评价':
          return 5
        case '已评价':
          return 6
        default:
          return 6
      }
    },
    getStatus (radio) {
      switch (radio) {
        case '1':
          return '已发布'
        case '2':
          return '预约成功'
        case '3':
          return '进行中'
        case '4':
          return '已完成'
        case '5':
          return '待评价'
        case '6':
          return '已评价'
        default:
          return '未知'
      }
    }

  },
  components: { MyOrderVue }

}
</script>

<style lang="less" scoped>
.class_list{
    display: flex;
    justify-content: space-between;
}
</style>
